<template>
	<view class="container">
		<!-- <view class="bg"></view> -->
		<view class="bg" :style="{backgroundImage: 'url('+ $util.img('image/health_bg.png') +')'}"></view>
		<u-navbar
		     :title="title"
		     @rightClick="rightClick"
		     :autoBack="true"
		     bgColor="transparent"
		     color="#ffffff"
		     leftIconColor="#ffffff"
		     :titleStyle="titleStyle"
		     :placeholder="true"
		 >
		 </u-navbar>
		 
		 <view class="health rel">
		 	<view class="healthItem" @click="goTo2('/otherpages/health/fileDetail')">
				 <image class="img" :src="$util.img('image/health_1.png')" mode="aspectFill" />
				 <text class="font-30 c-base font-weight-6">电子档案</text>
				 <text class="font-24 c-base">查询档案信息</text>
		 	</view>
			<view class="linecol"></view>
			<view class="healthItem" @click="goTo2('/otherpages/health/monitor')">
				 <image class="img" :src="$util.img('image/health_2.png')" mode="aspectFill" />
				 <text class="font-30 c-base font-weight-6">健康监测</text>
				 <text class="font-24 c-base">健康实时精测</text>
			</view>
			<view class="linecol"></view>
			<view class="healthItem" @click="goTo2('/otherpages/health/equipment')">
				 <image class="img" :src="$util.img('image/health/health_9.png')" mode="aspectFill" />
				 <text class="font-30 c-base font-weight-6">设备管理</text>
				 <text class="font-24 c-base">管理智能设备</text>
			</view>
			<!-- <view class="healthItem" @click="makePhone()">
				 <image class="img" :src="$util.img('image/health_3.png')" mode="aspectFill" />
				 <text class="font-30 c-base font-weight-6">健康咨询</text>
				 <text class="font-24 c-base">健康快询速答</text>
			</view> -->
		 </view>
		 
		<view class="main rel">
			<view class="tips flex-y-center" v-if="!profileInfo.user_name" @click="showFile = true">
				<i class="iconfont">&#xe63a;</i>
				<text class="font-26 font-weight-5">当前暂未创建档案 - 前往填写个人信息</text>
				<view class="make m-l-auto">去创建</view>
			</view>
			<view class="options" v-else>
				<view class="m-b-20  p-l-30 p-r-30 flex-x-between">
				  <view class="c-base">
				    <text class="text-bold m-r-14 font-30">我的档案</text>
				    <text class="font-24">定期检查更新身体状况</text>
				  </view>
				  <view class="flex-y-center c-base" @click="goTo2('/otherpages/health/historyFile')">
				    <text class="font-24 m-r-4">历史档案</text>
				    <u-icon name="arrow-right" color="#fff" size="14"></u-icon>
				  </view>
				</view>
				<view class="fill-base radius-20 p-30" @click="goTo2('/otherpages/health/fileDetail')">
					<view class="flex-y-center">
						<image :src="$util.img(userInfo.headimg)" mode="" class="avatar m-r-20" v-if="userInfo.headimg"></image>
						<image :src="$util.img('image/avatar.png')" mode="" class="avatar m-r-20" v-else></image>
						<view class="flex-1">
							<view class="font-30 text-bold">{{profileInfo.user_name}}</view>
							<view class="font-24 color-title2">档案更新于：{{profileInfo.last_time?profileInfo.last_time:''}}</view>
						</view>
						<u-icon name="arrow-right" color="#788096" size="14"></u-icon>
					</view>
					<view class="p-l-100">
						<view class="flex-warp" v-for="(item,index) in profileInfo.profile" :key="index">
							<view class="font-24 flex-1 flex-y-baseline" style="width: 50%;" v-for="(opitem,opindex) in item" :key="opindex">
								<text class="c-77 m-r-24">{{opitem.name}}</text>{{opitem.value}}{{opitem.default_unit}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="boxPanel flex" v-for="(item,index) in list" :key="index" @click="goTo(item)">
				<image :src="$util.img(item.image)" mode="" class="icon"></image>
				  <view class="flex-1 flex-column">
					<view class="text-bold">{{item.name}}</view>
					<view class="font-24  c-89">{{item.desc}}</view>
				  </view>
				<u-icon name="arrow-right" color="#788096" size="14"></u-icon>
			</view>
		</view>
		
		<file :show="showFile" @close="showFile = false" @confirm="confirmFile" v-if="showFile"></file>
		<warn :show="showWarn" @close="showWarn = false" v-if="showWarn"></warn>

		<!-- 登录 -->
		<login-pop ref="loginDialog"></login-pop>
		
	</view>
</template>

<script>
	import warn from '../../components/warn/warn.vue'
	import file from '../../components/file/file.vue'
	export default {
		components: {
			file,warn
		},
		data() {
			return {
				titleStyle: {
				  'color': '#ffffff'
				},
				title: '',
				list: [{
					image:'image/health_4.png',
					name: '健康评估',
					desc: '专业评估，健康权衡',
					url: '/otherpages/health/assessment',
					type: 1,
				},{
					image:'image/health_5.png',
					name: '健康指导',
					desc: '专业指导，健康有方',
					url: '',
					type: 2,
				},{
					image:'image/health_6.png',
					name: '膳食指导',
					desc: '专业指导，健康有方',
					url: '',
					type: 3,
				},{
					image:'image/health_7.png',
					name: '运动处方',
					desc: '运动处方，精准配策',
					url: '',
					type: 4,
				}],
				showFile: false,
				profileInfo: {
					user_name: '',
					profile: []
				},
				userInfo: {},
				showWarn: false,
			}
		},
		onLoad() {
			//   登录校验
		  	if (!uni.getStorageSync('token')) this.$refs.loginDialog.open();
			// this.getLogin()
		},
		onShow() {
			if(uni.getStorageSync('token')) {
				this.userInfo = uni.getStorageSync('userInfo') || {};
				this.getHealthData();
				this.getWarnInfo()
			}
		},
		methods: {
			confirmFile() {
				this.getHealthData();
				this.$forceUpdate();
			},
			makePhone() {
				let siteInfo = uni.getStorageSync('siteInfo') || {};
				uni.makePhoneCall({
					phoneNumber: siteInfo.site_tel
				})
			},
			goTo(item) {
				if(!this.profileInfo.user_name) {
					this.$util.showToast({title: '请先填写档案信息'});
					return
				}
				this.$util.redirectTo('/otherpages/health/assessment?type='+item.type+'&title='+item.name)
			},
			goTo2(url) {
				if(!this.profileInfo.user_name) {
					this.$util.showToast({title: '请先填写档案信息'});
					return
				}
				this.$util.redirectTo(url)
			},
			getHealthData() {
				this.$api.sendRequest({
			      url: "/api/userHealth/index",
			      data: {},
			      success: res => {
			        if(res.code == 0 && res.data) {
						let data = res.data;
						
						const profileInfo = data.profile;

						const chunkedArray = profileInfo.reduce((result, current, index, array) => {
						if (index % 2 === 0) {
							result.push(array.slice(index, index + 2));
						}
						return result;
						}, []);
						this.profileInfo = data;
						this.profileInfo.profile = chunkedArray;

						console.log(chunkedArray);

			        }else {
						// this.$util.showToast({title: res.message});
					}
			      }
			    })
			},
			getLogin() {
				this.$api.sendRequest({
			      url: "/api/login/login",
			      data: {
					username: 'ceshi',
					password: '123456'
				  },
			      success: res => {
			        if(res.code == 0) {
						
			        }else {
						this.$util.showToast({title: res.message});
					}
			      }
			    })
			},
			getWarnInfo() {
				this.$api.sendRequest({
			      url: "/api/userHealth/getAlertDetail",
			      data: {},
			      success: res => {
			        if(res.code == 0&&res.data.length>0) {
						this.showWarn = true;
			        }
			      }
			    })
			},
		}
	}
</script>

<style lang="scss" scoped>
.bg {
	position: absolute;
	top: 0;
	// width: 750rpx;
	// height: 726rpx;
	// background: linear-gradient(180deg, #00D075 77.67%, #00d07500 99.82%);
	width: 750rpx;
	height: 426rpx;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-size: cover;
}
.main {
	border-radius: 20rpx 20rpx 0 0;
	background: #F5F5F5;
	padding-top: 24rpx;
	.tips {
		padding: 10rpx 10rpx 10rpx 22rpx;
		border-radius: 20rpx;
		background: #FFF4EA;
		margin: 0 24rpx;
		color: #FF4400;
		.make {
			width: 109rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			border-radius: 100rpx;
			background: #F40;
			font-size: 24rpx;
			color: #fff;
		}
		.iconfont {
			color: #FF4400;
			margin-right: 12rpx;
		}
	}
}
.boxPanel {
	.icon {
	  width: 86rpx;
	  height: 86rpx;
	  margin-right: 20rpx;
	}
	
}

.health {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	.healthItem {
		width: 33%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		image {
			width: 85rpx;
			height: 85rpx;
		}
	}
	.linecol {
		width: 1rpx;
		height: 57rpx;
		background: rgba(255, 255, 255, 0.37);
	}
}

.options {
  background: $color-title2;
  border-radius: 20rpx;
  margin: 0 24rpx 30rpx;
  padding: 20rpx 0 0;
  border: 2rpx solid $color-title2;
  .avatar {
	  width: 80rpx;
	  height: 80rpx;
	  border-radius: 50%;
  }
}
</style>
